<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="utf-8">
	<title>普通用户管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../layui/css/layui.css" media="all">
	<style>
		.normalUser-con .layui-table-view {
			border: none;
		}
		
		.normalUser-con .layui-table-box {
			margin-top: 10px;
		}
		
		.normalUser-con {
			padding: 10px 15px 15px 15px;
			margin-bottom:50px;
		}
		.normalUser-con  .layui-table-tool-self{
			display:none;
		}
		.normalUser-con .not_border_left {
			border-left: none !important;
		}
		
		.normalUser-con .normalUser dl dd.layui-this {
			background-color: #1E9FFF !important;
		}
		
		.normalUser-con .hide {
			display: none;
		}
		
		.normalUser-con .show {
			display: block;
		}
		
		.normalUser-con .btn_size {
			height: 28px !important;
			line-height: 28px !important;
		}
		
		.normalUser-con .layui-table-body table tbody .layui-table-hover {
			background: #fffdd3 !important;
		}
		
		.normalUser-con .layui-table-body table tbody .layui-table-click {
			background: #fdef9b !important;
		}
		
		.normalUser-con .layui-table, .layui-table-view {
			border: none;
			margin-top: 0;
		}
		
		#add-normalUser {
			display: none;
			z-index: 999 !important;
		}
		
		#add-normalUser .artTypeLayer {
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			padding-top: 20px;
		}
		#upimg{
			width:80px;
			height:80px;
			margin-left:20%;
		}
	</style>
</head>
<body>
	<div class="normalUser-con">
		<script type="text/html" id="toolbarDemo">
			<form class="layui-form" action="">
			  	<div class="layui-input-inline">
					<input type="text" name="userName" id="userName" placeholder="请输入用户名" class="layui-input" autocomplete="off">
			    </div>
				<div class="layui-input-inline">
					<input type="text" name="selnickName" id="selnickName" placeholder="请输入昵称" class="layui-input" autocomplete="off">
			    </div>
			   <div class="layui-inline">
	     	   		<button id="btnselfrontinfo" type="button" class="layui-btn layui-bg-blue" lay-event="seleBtn">查询</button>
			   </div>
				<button type="button" class="layui-btn layui-bg-blue" id="addartType" lay-event="addartType" lay-filter="addartType" style="margin-left: 10px;">新增作者用户</button>
			</form>
		</script>

		<table class="layui-hide" name="normalUser" id="normalUser" lay-filter="normalUser"></table>

		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>

		<div id="add-normalUser">
			<div class="artTypeLayer">
				<form class="layui-form" action="">
					<div class="layui-form-item">
                            <label class="layui-form-label">用户账号：</label>
                            <div class="layui-input-block">
                                <input type="text" name="userid" id="userid" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户昵称：</label>
                            <div class="layui-input-block">
                                <input type="text" name="nickname" id="nickname" required lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">真实姓名：</label>
                            <div class="layui-input-block">
                                <input type="text" name="realname" id="realname" required lay-verify="required" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">登录密码：</label>
                            <div class="layui-input-block">
                                <input type="text" name="pwd" id="pwd" required lay-verify="required" placeholder="请输入登录密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">联系电话：</label>
                            <div class="layui-input-block">
                                <input type="text" name="mobile" id="mobile" required lay-verify="required" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户照片：</label>
                            <div class="layui-input-block">
                                <input type="text" name="userphoto" id="userphoto" required lay-verify="required" readonly="true" placeholder="请输上传一张作者照片" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别：</label>
                            <div class="layui-input-block">
                                <input type="radio" name="agend" value="男" title="男" checked>
                                <input type="radio" name="agend" value="女" title="女">
                            </div>
                        </div>
                    </div>
                    <!--上传照片-->
                    <div class="layui-form-item">
                        <div class="layui-upload">
                            <div class="layui-upload-list">
                                <img src="../imgs/defaultuser.jpg" class="layui-upload-img" id="upimg" />
                                <button type="button" name="btnaddphoto" class="layui-btn layui-btn-normal" id="uptest" style="margin-left:5%">上传作者照片</button>
                            	<p id="demoText" style="margin-left: 30%"></p>
                            </div>
                            
                        </div>
                    </div>
					<!-- 上传照片结束 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">个性签名：</label>
                        <div class="layui-input-block">
                            <textarea name="signature" id="signature" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
				</form>
			</div>
		</div>
	</div>
	<script src="../js/jquery-3.3.1.js" charset="utf-8"></script>
	<script src="../layui/layui.js" charset="utf-8"></script>
	<script>
		layui.use([ 'table', 'form', 'layer', 'laydate', 'laytpl', 'element','upload' ], function() {
			var table = layui.table, 
				form = layui.form, 
				layer = layui.layer, 
				$ = layui.jquery,
				laydate = layui.laydate, 
				laytpl = layui.laytpl,
				upload = layui.upload,
				element = layui.element;
				
			//日期
			laydate.render({
			    elem: '#addDate'
			});
			
	
			
			/*加载表格*/
			table.render({
				elem : '#normalUser',
				id:'normalUserid',
				url : '../authoruser',
				toolbar : '#toolbarDemo',
				title : '普通用户数据表',
				height: "full-75",
				skin : 'line',
				even : true,
				cols : [ 
				     [ {
						type : 'numbers',
						title : '序号',
						align : 'center',
						width : 80
					}, {
						field : 'userid',
						title : '用户名',
						align : 'center'
					}, {
						field : 'realname',
						align : 'center',
						title : '真实姓名'
					},
					{
						field : 'nickname',
						align : 'center',
						title : '昵称',
					}, {
						field : 'pwd',
						align : 'center',
						title : '密码'
					},{
						field : 'signature',
						align : 'center',
						title : '作者简介'
					},{
						field : 'name',
						align : 'center',
						title : '用户类型'
					},{
						title : '操作',
						toolbar : '#barDemo',
						align : 'center'
					} ] 
				 ],
				 page: {
						layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
						groups: 5,
						limit: 10,
						limits: [10, 20, 30, 40, 50],
						theme: '#1E9FFF',						
				 },
			});
		
			/* 点击查询对网站用户进行筛选 */
			$("#btnselfrontinfo").click(function() {
				table.reload('normalUserid', {
					method : 'post',
					where : {
						'userid' : $("#userName").val().trim(),
						'nickname':$("#selnickName").val().trim(),
							},
					page : {
						curr : 1
						}
				});
			})
		
			//添加信息类型管理
			table.on('toolbar(normalUser)', function(obj) {
				switch (obj.event) {
					case 'addartType':
						layer.open({
							type : 1,
							title : '作者用户添加',
							area : [ '660px', '620px' ],
							shade : 0.4,
							content : $('#add-normalUser'),
							btn : [ '保存', '返回' ],
							yes : function() {
								var userid = $("#userid").val();
								var nickname = $("#nickname").val();
								var pwd = $("#pwd").val();
								var realname = $("#realname").val();
								var mobile = $("#mobile").val();
								var userphoto = $("#userphoto").val;
								var agend = $("input[name='agend']").val();
								var signature = $("#signature").val();
			
								if(userid == "") {
									layer.tips('不能为空', '#userid');
									return;
								} 
								else if(pwd == "") {
									layer.tips('不能为空', '#pwd');
									return;
								}
								else if(realname == "") {
									layer.tips('不能为空', '#realname');
									return;
								}
								else if(mobile == "") {
									layer.tips('不能为空', '#mobile');
									return;
								}
								else if(userphoto == "") {
									layer.tips('不能为空', '#userphoto');
									return;
								}
								else if(nickname == "") {
									layer.tips('不能为空', '#nickname');
									return;
								}
								else if(signature == "") {
									layer.tips('不能为空', '#signature');
									return;
								}
								
								//构建参数
								var para = '?userid='+userid+'&pwd='+pwd+'&realname='+realname+'&mobile='+mobile+'&userphoto='+userphoto+'&agend='+agend+'&signature='+signature+'&nickname='+nickname;
								$.ajax({
									type : 'get',
									url : '../addauthoruser' + para,
									datatype : 'json',
									success : function(data) {
										if (data.code == "10001") {
											layer.confirm(data.msg, {
											  btn: ['确定']
											}, function(){
												table.reload("normalUserid", { //此处是上文提到的 初始化标识id
									                where: {
									                	keyword:data.code=='10001'
									                }
									            });	
												layer.closeAll();
											});
										}else{
											layer.confirm(data.msg, {
											  btn: ['确定']
											});
											layer.setTop(layero);
										}
									},
									error : function(data) {
											layer.confirm('系统原因，添加用户失败', {
											  btn: ['确定']
										});
									}
								});						
							},
							btn2 : function() {
								layer.closeAll();
							},
						});
					break;
				};
			});
		
			//表格工具栏事件 
			table.on('tool(normalUser)', function(obj) {
				var data = obj.data;
				switch (obj.event) {
					case 'edit':
						$("#userid").val(data.userid);
						$("#userid").attr("disabled","disabled");;
						$("#nickname").val(data.nickname);
						$("#realname").val(data.realname);
						$("#pwd").val(data.pwd);
						$("#mobile").val(data.mobile);
						$("#userphoto").val(data.userphoto);
						$("#signature").val(data.signature);
						layer.open({
							type : 1,
							title : '用户信息修改',
							area : [ '660px', '620px' ],
							shade : 0.4,
							content : $('#add-normalUser'),
							btn : [ '保存', '返回' ],
							yes : function() {
								var userid = $("#userid").val();
								var nickname = $("#nickname").val();
								var pwd = $("#pwd").val();
								var realname = $("#realname").val();
								var mobile = $("#mobile").val();
								var userphoto = $("#userphoto").val;
								var agend = $("input[name='agend']").val();
								var signature = $("#signature").val();
			
								if(userid == "") {
									layer.tips('不能为空', '#userid');
									return;
								} 
								else if(pwd == "") {
									layer.tips('不能为空', '#pwd');
									return;
								}
								else if(realname == "") {
									layer.tips('不能为空', '#realname');
									return;
								}
								else if(mobile == "") {
									layer.tips('不能为空', '#mobile');
									return;
								}
								else if(userphoto == "") {
									layer.tips('不能为空', '#userphoto');
									return;
								}
								else if(nickname == "") {
									layer.tips('不能为空', '#nickname');
									return;
								}
								else if(signature == "") {
									layer.tips('不能为空', '#signature');
									return;
								}
								
								//构建参数
								var para = '?userid='+userid+'&pwd='+pwd+'&realname='+realname+'&mobile='+mobile+'&userphoto='+userphoto+'&agend='+agend+'&signature='+signature+'&nickname='+nickname;
								$.ajax({
									type : 'get',
									url : '../modifyauthorluser' + para,
									datatype : 'json',
									success : function(data) {
										if (data.code == "10001") {
											layer.confirm(data.msg, {
											  btn: ['确定']
											}, function(){
												table.reload("normalUserid", { //此处是上文提到的 初始化标识id
									                where: {
									                	keyword:data.code=='10001'
									                }
									            });	
												layer.closeAll();
											});
										}else{
											layer.confirm(data.msg, {
											  btn: ['确定']
											});
											layer.setTop(layero);
										}
									},
									error : function() {
										layer.confirm('出现错误，修改失败，请重试！', {
											  btn: ['确定']
										});
									}
								});		
							},
							btn2 : function() {
								layer.closeAll();
							},
						});
					break;
					
					//删除按钮操作
					case 'del':
						//询问框
						layer.confirm('确定要删除么？', {
						  btn: ['确定','取消'] //按钮
						}, function(){
							$.ajax({
				        		type: 'get',
				        		url: "../deleteuser?userid=" + data.userid,
				        		dataType: 'json',
				        		success:function(data){
				        			if(data.code == 10001){
				        				layer.confirm(data.msg, {
										  btn: ['确定']
										}, function(){
											table.reload("normalUserid", { //此处是上文提到的 初始化标识id
								                where: {
								                	keyword:data.code=='10001'
								                }
								            });	
											layer.closeAll();
										});          				 
				        			}
				        			else{
				        				layer.confirm(data.msg, {
											  btn: ['确定']
										});
				        			}
				        		},
				        		error:function(){
				        			layer.confirm('出现错误，删除失败，请重试！', {
										  btn: ['确定']
									});
				        		},
				        	});   
						}, function(){ 
							layer.closeAll();
						});
					break;
					
				}
				;
			});
			
			
        //普通图片上传
        var uploadInst = upload.render({
	        
            elem: '#uptest',
            url:'../fileupload.do?path=' + $("#userid").val(),
            
            before: function(obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result) {
                    $('#upimg').attr('src', result); //图片链接（base64）
                });
               
            },
            done: function(res) {
				$('#userphoto').val(res.result1);
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
            },
            error: function() {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function() {
                    uploadInst.upload();
                });
            }
        });
		
	});


		
	</script>
</body>
</html>